<style>

.box-card {
  width: 100px;
  height: 50px;
  margin: 0;
  padding: 0;
}

</style>


<template>
  <div class="addJm">
    <el-form style="margin-top: 50px;" ref="form" :model="form" align="left">
      <p style="margin-left: 20px">| 居民信息</p>
      <el-form-item style="margin-left: 50px;margin-top: 30px">
        <el-row style="width: 1600px">
          <el-col style="background-color: white;float: left" :span="8">
            <el-form-item prop="name" style="margin-bottom: 20px">
              姓名：
              <el-input style="width: 220px;margin-left: 39px" v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="出生年月：" style="margin-bottom: 20px">
              <el-date-picker v-model="form.ctime" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="居民标签："  style="margin-bottom: 20px">
              <el-select v-model="form.bq" placeholder="请选择">
                <!-- 这里可以添加具体的居民标签选项 -->
                <el-option label="高血糖" value="高血糖"></el-option>
                <el-option label="高血压" value="高血压"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="background-color: white" :span="8">
            <el-form-item label="身份证号：" style="margin-bottom: 20px" prop="idNumber">
              <el-input style="width: 220px" v-model="form.sfz" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" style="margin-bottom: 20px" prop="phoneNumber">
              <el-input style="width: 220px" v-model="form.sjh"
                        placeholder="居民登录账号，请正确填写"></el-input>
            </el-form-item>
            <el-form-item label="家庭成员：" prop="familyMembers">
              <el-button type="text" v-show="!tj" @click="dialogFormVisible=true">+ 关联家庭成员</el-button>
              <div v-show="tj" style="width: 170px;height: 70px;padding: 10px;background-color: antiquewhite;margin-top: 10px;float: left;margin-right: 15px" v-for="item in this.xs">
                <img :src="item.img"
                     alt="" style="width: 50px; height: 50px;float: left;">
                <div style="float:left; margin-left: 20px">
                  <div style="height: 20px;">{{item.name}}&nbsp;&nbsp;<font size="1px" color="#a9a9a9">{{item.age}}岁</font></div>
                  <div style="height: 10px"><font size="1px" color="#a9a9a9">关系：{{item.gx}}</font></div>
                </div>

              </div>
            </el-form-item>
          </el-col>
          <el-col style="background-color: white;" :span="8">
            <el-form-item label="性别：" prop="gender" style="margin-bottom: 20px">
              <el-select v-model="form.sex" style="width: 220px;margin-left: 28px;" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="现居地：" style="margin-bottom: 20px" prop="currentAddress">
              <el-input v-model="form.xjd" style="width: 220px;margin-left: 13px"
                        placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="登录密码：" prop="password">
              <el-input v-model="form.dlmm" style="width: 220px" type="password"
                        placeholder="8位以上的数字和字母组合"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100px" @click="addjm()">保存</el-button>
        <el-button type="success" style="width: 160px" @click="tz">完善居民档案</el-button>
        <el-button type="warning" style="width: 100px" @click="bjqy()">立即签约</el-button>
        <el-button type="info" style="width: 100px" @click="fh()">返回</el-button>
      </el-form-item>
    </el-form>

    <!--   关联成员信息-->
    <div align="center">
      <el-dialog class="popup" title="关联家庭成员" style="width: 800px;margin-left: 490px;margin-top: 100px"
                 :visible.sync="dialogFormVisible">
        <el-form :model="form" align="center">
          <el-form-item>
            选择成员：
            <el-select v-model="form.gid" placeholder="请选择">
              <el-input placeholder="搜索居民姓名" @input="handleInput" type="text" class="el-input" v-model="gl.name" suffix-icon="el-icon-search"></el-input>
              <el-option v-for="item in gls" :label="item.name+' '+(item.sex==1?'男':'女')+' '+item.age" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            选择关系：
            <el-select v-model="form.gx" placeholder="请选择">
              <el-option label="请选择" value=""></el-option>
              <el-option label="父母" value="父母"></el-option>
              <el-option label="配偶" value="配偶"></el-option>
              <el-option label="兄弟" value="姐妹"></el-option>
              <el-option label="姐妹" value="兄弟"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      form: {
      },
      tj:false,
      user: {
        id: '',
      },
      dialogFormVisible: false,
      gls: [],
      gl: {
      },
      xs:[],
    };
  },
  methods: {
    // 编辑签约
    bjqy(){
      localStorage.setItem("form",JSON.stringify(this.form));
      this.$router.push('/xy');
    },
    // 返回方法
    fh() {
      this.$router.push('/jmgl');
    },

    tz(){
      // console.log(this.xs[0])
      // console.log(this.form)
      localStorage.setItem("form",JSON.stringify(this.form));
      localStorage.setItem("xs",JSON.stringify(this.xs));
      this.$router.push('/jmxg');
    },

    // 判断身份证号是否正确
    checkIDNumber(sfz) {
      // 简单的身份证号验证逻辑（这里只是初步验证）
      return /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))((0[1-9])|([12]\d)|3[01])\d{3}[\dXx]$/.test(sfz);
    },
    checkPhoneNumber(sjh) {
      // 使用正则表达式判断手机号是否有效
      return  /^1[3-9]\d{9}$/.test(sjh);
    },
    // 保存信息
    addjm(){
      if(this.form.name==''||this.form.name==null){
        this.$message({
          type: 'error',
          message: '请输入姓名!'
        });
        return;
      } else if(!this.checkIDNumber(this.form.sfz)){
        this.$message({
          type: 'error',
          message: '身份证号格式不正确!'
        });
      } else if(!this.checkPhoneNumber(this.form.sjh)){
        this.$message({
          type: 'error',
          message: '手机号格式不正确!'
        });
      }else if(this.form.dlmm.length<8){
        this.$message({
          type: 'error',
          message: '密码长度不能小于8位!'
        });
      }
      else{
        this.axios.post(`http://localhost:8202/person/addJm`,this.form).then(res=>{
          if(res.data.code==200){
            this.$message({
              type: 'success',
              message: '添加成功!'
            });

          }else{
            this.$message({
              type: 'error',
              message: '添加失败!'
            });
          }
          // this.saveId();
          this.$router.push('/jmgl');
        })

      }

    },


    // 取消方法
    qx(){
      this.form.gx = '';
      this.form.gid = '';
      this.form.name = '';
    },
    // 获取用户信息
    hqgl() {
      this.axios.get(`http://localhost:8202/person/hqgl`).then(res => {
        this.gls = res.data.data;
      })
    },
    // 模糊查询
     handleInput(){
      this.gl.pid=0;
      this.axios.post(`http://localhost:8202/person/mhList`,this.gl).then(res=>{
        this.gls = res.data.data;
      })
    },

  //   确定方法
    qd(){
      for(var i=0;i<this.gls.length;i++){
        if(this.form.gid==this.gls[i].id){
          this.gls[i].gx = this.form.gx;
          this.xs.push(this.gls[i])
        }
      }
      this.tj=true;
    },


  },
  created() {
    this.hqgl();

  }
};
</script>
